import React from 'react';
import { Card, Rate, Tag } from 'antd';
import { Link } from 'react-router-dom';

const { Meta } = Card;

const MovieCard = ({ movie }) => {
  const statusColors = {
    UPCOMING: 'blue',
    RELEASED: 'green',
    ENDED: 'red'
  };

  return (
    <Link to={`/movies/${movie.id}`}>
      <Card
        hoverable
        className="movie-card"
        cover={
          <img 
            alt={movie.title} 
            src={movie.posterUrl || 'https://via.placeholder.com/300x450?text=No+Poster'} 
          />
        }
      >
        <Meta 
          title={movie.title} 
          description={
            <>
              <div>
                <Rate disabled defaultValue={movie.rating / 2} allowHalf /> 
                <span className="ant-rate-text">{movie.rating}</span>
              </div>
              <div>
                <Tag color={statusColors[movie.status]}>{movie.status}</Tag>
                {movie.releaseDate && <span>上映: {movie.releaseDate}</span>}
              </div>
            </>
          } 
        />
      </Card>
    </Link>
  );
};

export default MovieCard; 